<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <%
        String uid = request.getSession().getAttribute("uid").toString();
        session.setAttribute("uid", uid);
    %>
</head>

<script type="text/javascript">

    /*  $(function(
      ){
          var lws = '<%=request.getAttribute("lws")%>' ;
        console.log('lws',las)
    })*/

    function check(lid, eid, appoint_time) {
        var uid = '<%=session.getAttribute("uid")%>';
        // console.log(lid, sid, eid, appoint_time)
        //获取seat的值
        var sid = $('input[name="seatid"]:checked').val();
        // console.log(sid);
        //获取当前登录的用户
        if (confirm("确认要选择这个实验吗?")) {
            $.post("app?action=save", {
                    lid: lid,
                    sid: sid,
                    eid: eid,
                    appoint_time: appoint_time,
                    uid: uid
                },
                function (result) {
                    var flag = eval('(' + result + ')');
                    // console.log(result);
                    if (flag) {
                        alert("选课成功!");
                        // window.location.reload(true);
                        window.location.href = "${pageContext.request.contextPath}/app?action=list";
                    } else {
                        alert("选课失败");
                    }
                }
            );
        }
    }

    function nocheck(eid) {
        //获取当前登录的用户
        var uid = '<%=session.getAttribute("uid")%>';
        // console.log(lid)
        console.log(eid, uid)
        if (confirm("确认要取消这个实验吗?")) {
            $.post("app?action=del", {eid: eid, uid: uid},
                function (result) {
                    var flag = eval('(' + result + ')');
                    if (flag) {
                        alert("取消成功!");
                        <%--window.location.href = "${pageContext.request.contextPath}/app?action=del";--%>
                        window.location.href = "${pageContext.request.contextPath}/app?action=list";
                    } else {
                        alert("取消失败");
                    }
                }
            );
        }
    }

    function optionExp() {
        $("#optionexp").removeAttr("hidden");
        $("#checkexp").attr("hidden", "true");
        $("#item3").addClass("selected-item"); // 追加样式
        $("#item4").removeClass("selected-item");
        $("#item4").removeClass("unselected-item");
    }

    function checkExp() {
        $("#optionexp").attr("hidden", "true");
        $("#checkexp").removeAttr("hidden");
        $("#item4").addClass("selected-item"); // 追加样式
        $("#item3").removeClass("selected-item");
        $("#item3").removeClass("unselected-item");
    }
</script>

<body>
<div class="table-container" style="margin-top: 70px;margin-bottom: 70px">

    <div class="table-top">
        <span class="table-title">预约选课</span>
    </div>

    <div class="table-main">
        <div class="main_left">
            <ul class="">
                <li id="item3" onclick="optionExp()" class="selected-item"><a>可选实验</a></li>
                <li id="item4" onclick="checkExp()" class=""><a>已选实验</a></li>
            </ul>
        </div>

        <div class="main_right">
            <%--可选实验--%>
            <table id="optionexp" class="table class-table">
                <tr>
                    <th style="text-align: center">实验名称</th>
                    <th style="text-align: center">实验教师</th>
                    <th style="text-align: center">实验教室</th>
                    <th style="text-align: center">实验日期</th>
                    <th style="text-align: center">章节</th>
                    <th style="text-align: center">座次</th>
                    <th style="text-align: center">操作</th>
                </tr>
                <c:forEach var="la" items="${lws}" varStatus="status">
                    <tr align="center">
                        <td align="center">${la.ename}</td>
                        <td>${la.eteacher}</td>
                        <td>${la.labname}</td>
                        <td><fmt:formatDate value="${la.appoint_date}" type="date" pattern="yyyy-MM-dd"/></td>
                        <td>第${la.appoint_time}大节</td>
                        <td>
                            <c:forEach var="seat" items="${seats}" varStatus="status">
                                <c:if test="${seat.is_taken==1}">
                                  <input type="radio" id="${seat.seat}" value="${seat.seat}" name="seatid"
                                         style="display: none">
                                    ${status.current.seat}
                                </c:if>
                                <c:if test="${seat.is_taken==0}">
                                    <input type="radio" id="${seat.seat}" value="${seat.seat}" name="seatid">
                                    ${status.current.seat}
                                </c:if>

                            </c:forEach>
                        </td>
                        <td>
                            <button class="btn btn-danger xuanke-btn" type="button"
                                    onclick="check(${la.lab},${la.experiment},${la.appoint_time})">
                                选课
                            </button>
                        </td>
                    </tr>
                </c:forEach>
            </table>
            <%--已选实验--%>
            <table id="checkexp" class="table class-table" hidden="true">
                <tr>
                    <th style="text-align: center">实验名称</th>
                    <th style="text-align: center">实验教师</th>
                    <th style="text-align: center">实验教室</th>
                    <th style="text-align: center">实验日期</th>
                    <th style="text-align: center">章节</th>
                    <th style="text-align: center">座次</th>
                    <th style="text-align: center">操作</th>
                </tr>
                <c:forEach var="ls" items="${lls}" varStatus="status">
                    <tr>
                        <td>${ls.ename}</td>
                        <td>${ls.eteacher}</td>
                        <td>${ls.labname}</td>
                        <td><fmt:formatDate value="${ls.appoint_date}" type="date" pattern="yyyy-MM-dd"/></td>
                        <td>第${ls.appoint_time}大节</td>
                        <td>${ls.seat}</td>
                        <td>
                            <button class="btn btn-danger xuanke-btn" type="button"
                                    onclick="nocheck(${ls.experiment})">
                                取消
                            </button>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>

    </div>
</div>
</body>
</html>